<script setup>
import {ref,onMounted,onBeforeUnmount} from "vue"
import {router} from "../router"

import zhanzhang from "../../public/images/learn/zhanzhang.jpg"
import gdyg_tj from "../../public/images/anime/gdyg_tj.jpg"
import blzh_tj from "../../public/images/anime/blzh_tj.jpg"
import leftPoint from "../../public/icons/leftPoint.svg" 
import rightPoint from "../../public/icons/rightPoint.svg" 
import huo_white from "../../public/icons/home/huo_white.svg"
// import from "../../public/images/learn/zhanzhang.jpg"

import masterDialogModel from "../components/masterDialogModel.vue"

const learnBoxRef = ref(null)
const learnPointRef = ref(null) 
const learnPointBoxRef = ref(null)
const swiperMini1Ref = ref(null)
const swiperMini2Ref = ref(null)
const swiperMini3Ref = ref(null)
const swiperMini4Ref = ref(null)

const miniSwiperImage1 = ref(zhanzhang)
const miniSwiperImage2 = ref(gdyg_tj)
const miniSwiperImage3 = ref(blzh_tj)
const miniSwiperImage4 = ref(zhanzhang)
const miniSwiperName = ref("站长的私人博客")

const dialog1Name = ref("番剧")
const dialog2Name = ref("音乐")
const dialog3Name = ref("国创")

const dialog1GoTo = ref("anime")
const dialog2GoTo = ref("music/home")
const dialog3GoTo = ref("guochuang")

const swiperBack = ref("rgba(233,212,190,1)")

let inter = null
const swiperNum = ref(0)

function formatDateTime(date) {
  const year = date.getFullYear();
  const month = (date.getMonth() + 1).toString().padStart(2, '0');
  const day = date.getDate().toString().padStart(2, '0');
  const hours = date.getHours().toString().padStart(2, '0');
  const minutes = date.getMinutes().toString().padStart(2, '0');
  const seconds = date.getSeconds().toString().padStart(2, '0');
  return `${year}_${month}_${day}_${hours}_${minutes}_${seconds}`;
}

onMounted(()=>{
    router.replace('/home')

    // let currentTime = new Date().getTime();
    // 获取当前时间的日期字符串
    // let currentDate = new Date().toDateString();
    // console.log(currentDate)
    // 获取当前时间的完整日期和时间字符串
    // let currentDateTime = new Date().toLocaleString();
    // console.log(currentDateTime)
    // let currentDateTime = new Date()
    // let formatDateTime = currentDateTime.toISOString().replace(/[-T:\.Z]/g, '_').slice(0, -5)
    // console.log(formatDateTime)
    const date = new Date()
    console.log(formatDateTime(date))
})
//组件销毁前
onBeforeUnmount(()=>{
    clearInterval(inter)
    inter = null
})

let isLearnShow = ref(false)
const moveLearn = async() => {
    if(!isLearnShow.value){
        learnBoxRef.value.style.transform = "translateX(-100px)"
        learnPointBoxRef.value.style.transform = "translateX(-100px)"
        learnPointRef.value.style.transform = "rotate(3.142rad)"
        isLearnShow.value = true
    }else{
        learnBoxRef.value.style.transform = "translateX(0)"
        learnPointBoxRef.value.style.transform = "translateX(0)"
        learnPointRef.value.style.transform = "rotate(0)"
        isLearnShow.value = false
    }
}

const goToLange = (num) => {
    switch(num){
        case 1:
            router.push('/learn/go')
            break
        default:
            break
    }
}
const goToPage = (num) => {
    switch(num){
        case 1:
            router.push("/learn/ismy/init")
            break
        case 2:
            router.push("/anime-player/gdyg/1")
            break
        case 3:
            router.push("/anime-player/blzh/1")
            break
        case 4:
            window.location.href="https://blog.csdn.net/yasinawolaopo"
            break
        default:
            break
    }
}

const leftBtn = async() => {
    if(swiperNum.value < 0 ){
        swiperNum.value = 0
    }
    swiperNum.value -= 2
}
const rightBtn = async() => {
    if(swiperNum.value > 4 ){
        swiperNum.value = 0
    }
    swiperNum.value += 1
}
const goToPopular = () => {
    router.push('/popular/all')
}

</script>

<template>
    <div class="titleImageBox">
        <img src="../../public/images/master/title_image.webp" alt="" />
    </div>
    <div class="funcBox">
        <div class="func1Box">
            <div class="func1Btn1">
                <div class="func1Btn1Image">

                </div>
            </div>
            <div class="func1Btn2">
                <div class="func1Btn2Image" @click="goToPopular">
                    <img :src="huo_white" alt="">
                </div>
            </div>
        </div>
        <div class="func2Box">
            <div class="hang1">
                <masterDialogModel :name="dialog1Name" :url="dialog1GoTo"/>
            </div>
            <div class="hang2">
                <masterDialogModel :name="dialog2Name" :url="dialog2GoTo"/>
            </div>
        </div>
        <div class="func3Box"></div>
    </div>
    <div class="learnBox" ref="learnBoxRef">
        <div class="learnTitleBox">
            <span>"学习"天地</span>
        </div>
        <div class="learnLangeBox">
            <img src="../../public/icons/learn/learnGo.svg" alt="" @click="goToLange(1)"/>
        </div>
    </div>
    <div class="learnBtnBox" @click="moveLearn()" ref="learnPointBoxRef">
        <img :src="leftPoint" alt="" ref="learnPointRef" />
    </div>
    <div class="showBox">
        <router-view></router-view>
    </div>
    
</template>

<style scoped>
.titleImageBox{
    position: absolute;
    left: 0;
    top: 0;
    width: 1872px;
    height: 18%;
    z-index: -1;
}
.titleImageBox img{
    width: 100%;
    height: 100%;
    /* background-size: cover; */
}
.titleImageBox img{
    width: 1872px;
    height: 100%;
}

.funcBox{
    position: absolute;
    left: 0;
    top: 18%;
    width: 1872px;
    height: 15%;
    display: flex;
}
.func1Box{
    width: 15%;
    height: 100%;
    display: flex;
}
.func1Btn1,
.func1Btn2{
    width: 50%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
}
.func1Btn1 .func1Btn1Image{
    width: 70%;
    height:68%;
    background-color: skyblue;
    border-radius: 50%;
}
.func1Btn2 .func1Btn2Image{
    width: 70%;
    height:68%;
    display: flex;
    align-items: center;
    justify-content: center;
    background-color: rgb(240,119,117);
    border-radius: 50%;
}
.func1Btn2Image img{
    width: 60%;
    height: 60%;
}
.tuijianBox{
    position: absolute;
    left: 0;
    top: 33%;
    width: 1872px;
    height: 500px;
    /* background-color: skyblue; */
    display: flex;
    align-items: center;
    overflow: hidden;
}
.swiperMiniBox{
    width: 45%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    /* background-color: saddlebrown; */
}
.swiperMiniMaster{
    width: 90%;
    height: 90%;
    border-radius: 15px;
    overflow: hidden;
    transition: all 0.3s;
    /* background-color: saddlebrown; */
}
.swiperMini{
    width: 400%;
    /* height: 75%; */
    height: 100%;
    background-color: orange;
    border-top-left-radius: 15px;
    border-top-right-radius: 15px;
    display: flex;
    transition: all 0.3s;
}
.swiperMini1,
.swiperMini2,
.swiperMini3,
.swiperMini4{
    width: 100%;
    height: 100%;
    transition: all 0.3s;
}


.swiperMini1 img,
.swiperMini2 img,
.swiperMini3 img,
.swiperMini4 img{
    width: 100%;
    height: 100%;
}

.yingyinBox{
    position: absolute;
    left: 2.2%;
    top: 78%;
    width: 40.55%;
    height: 17%;
    z-index: 2;
    /* filter: blur(10px); */
    /* background: rgba(220, 220, 220, 0.95); */
    border-bottom-right-radius: 10px;
    border-bottom-left-radius: 10px;
}
.swiperMiniMessage{
    width: 100%;
    height: 25%;
    background-color: skyblue;
    border-bottom-left-radius: 15px;
    border-bottom-right-radius: 15px;
}
.learnBox{
    position: fixed;
    right: -100px;
    top: 300px;
    width: 100px;
    height: 500px;
    background: rgba(190, 190, 190, 0.5);
    /* display: none; */
    transition: all 0.5s;
}
.learnBtnBox{
    position: fixed;
    right: 0;
    top: 500px;
    width: 20px;
    height: 50px;
    border-top-left-radius: 8px;
    border-bottom-left-radius: 8px;
    display: flex;
    align-items: center;
    justify-content: center;
    user-select: none;
    cursor: pointer;
    transition: all 0.5s;
    /* transform: translateX(-100px); */
}
.learnTitleBox{
    width: 100%;
    height: 10%;
    /* background-color: skyblue; */
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 17px;
    font-weight: 700;
}
.learnBtnBox img{
    width: 80%;
    height: 80%;
    transition: all 0.5s;
    /* transform: rotate(3.142rad); */
}
.learnLangeBox{
    width: 100%;
    height: 20%;
    /* background-color: red; */
    display: flex;
    align-items: center;
    justify-content: center;
}
.learnLangeBox img{
    width: 80%;
    height: 80%;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    user-select: none;
}

.miniSwiperName{
    width: 60%;
    height: 60%;
    display: flex;
    align-items: center;
    font-style: normal;
    font-size: 20px;
    color: #fff;
    font-family: 'Courier New', Courier, monospace;
}
.changeBtnBox{
    position: absolute;
    left: 620px;
    top: 410px;
    width: 150px;
    height: 50px;
    z-index: 5;
    display: flex;
}
.changeBtnLeft,
.changeBtnRight{
    width: 50%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
}
.changeBtnLeft img{
    width: 80%;
    height: 80%;
}
.pointBox{
    width: 50%;
    height: 80%;
    display: flex;
    align-items: center;
    justify-content: center;
    background-color: rgba(200, 200, 200, 0.7);
    border-radius: 10px;
    cursor: pointer;
}
.changeBtnRight img{
    width: 80%;
    height: 80%;
    transform: rotate(180deg);
}

.showBox{
    position: absolute;
    left: 0;
    top: 33%;
    width: 1855px;
    height: 67%;
    /* background-color: skyblue; */
}

.func2Box{
    width: 75%;
    height: 100%;
}
.hang1,
.hang2{
    width: 100%;
    height: 50%;
    display: flex;
    align-items: center;
}

.func3Box{
    width: 15%;
    height: 100%;
    background-color: blueviolet;
}

</style>